<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>老婆，我爱你</title>
  <link href="{{ STATIC_URL }}css/default.css" type="text/css" rel="stylesheet">
  <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon" />
  <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/garden.js"></script>
  <script type="text/javascript" src="{{ STATIC_URL }}js/functions.js"></script>
</head>

<body>
  <div id="mainDiv">
  	<div id="content">
  		<div id="code">
  			<span class="comments">/**</span><br />
  			<span class="space"/><span class="comments">from 2013-09-08,</span><br />
  			<span class="space"/><span class="comments">to today.</span><br />
  			<span class="space"/><span class="comments">*/</span><br />
  			Boy name = <span class="keyword">Mr</span> Yang<br />
  			Girl name = <span class="keyword">Mrs</span> Wang<br />
  			<span class="comments">// Fall in love river. </span><br />
  			The boy loves the girl;<br />
  			<span class="comments">// They love each other.</span><br />
  			The girl also loves the boy;<br />
  			<span class="comments">// As time goes on.</span><br />
  			The boy can not be separated the girl;<br />
  			<span class="comments">// At the same time.</span><br />
  			The girl can not be separated the boy, too;<br />
  			<span class="comments">// Even both wind and snow all over the sky.</span><br />
  			<span class="comments">// We still go hand in hand.</span><br />
  			<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
  			<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
  			<span class="placeholder"/><span class="comments">// Either it is right now</span><br />
  			<span class="placeholder"/><span class="comments">// Or in the distant future.</span><br />
  			<span class="placeholder"/>The boy has nothing but one dream;<br />
  			<span class="comments">// The boy wants the girl to be happy everyday.</span><br />
  			<br>
  			<br>
  			I want to say:<br />
  			Baby, I love you forever;<br />
  		</div>
  		<div id="loveHeart">
  			<canvas id="garden"></canvas>
  			<div id="words">
  				<div id="messages">
  					亲爱的，这是我们相爱在一起的时光。
  					<div id="elapseClock"></div>
  				</div>
  				<div id="loveu">
  					爱你直到永永远远。<br/>
  					<div class="signature">- 杨先生</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </div>

  <script type="text/javascript">
    var offsetX = $("#loveHeart").width() / 2;
    var offsetY = $("#loveHeart").height() / 2 - 55;
    var together = new Date();
    together.setFullYear(2013,9,8);
    together.setHours(20);
    together.setMinutes(0);
    together.setSeconds(0);
    together.setMilliseconds(0);

    if (!document.createElement('canvas').getContext) {
    	var msg = document.createElement("div");
    	msg.id = "errorMsg";
    	document.body.appendChild(msg);
    	$("#code").css("display", "none");
    	$("#copyright").css("position", "absolute");
    	$("#copyright").css("bottom", "10px");
    	document.execCommand("stop");
    } else {
    	setTimeout(function () {
    		startHeartAnimation();
    	}, 5000);

    	timeElapse(together);
    	setInterval(function () {
    		timeElapse(together);
    	}, 500);

    	adjustCodePosition();
    	$("#code").typewriter();
    }
  </script>
</body>
</html>
